<template>
    <div>
        <Shortcut></Shortcut>
        <div class="Pay">
            <div class="header">
                <div class="title clearfix">
                    <div class="logo fl">
                        <Logo></Logo>
                    </div>
                    <div class="shop-name fl">极客商城</div>
                    <div class="name fl">订单确认页面</div>
                </div>
            </div>
            <div class="content-title">填写并核对订单信息</div>
            <div class="order-info">
                <div class="clearfix">
                    <div class="step-title fl">
                        <h3>收货人信息</h3>
                    </div>
                    <div class="add-address fr">新增收货地址</div>
                </div>
                <!-- 这里是需要循环的地方 -->
                <div
                    class="step-content"
                    v-for="(item, index) in allAddresses"
                    :key="index"
                >
                    <span
                        class="address-name cs"
                        :class="item.selected ? 'selected' : ''"
                        @click="changeSelected(item.id)"
                        >{{ item.signer_name }}</span
                    >
                    <span class="address-info">{{ item.signer_address }}</span>
                    <span class="address-phone">{{ item.telphone }}</span>
                    <span class="address-default" v-show="item.default == 1"
                        >默认地址</span
                    >
                </div>
                <hr />
                <div class="step-title">
                    <h3>支付方式</h3>
                </div>
                <div class="step-content">
                    <div class="pay-mode selected">支付宝支付</div>
                </div>
                <hr />
                <div class="step-title">
                    <h3>送货清单</h3>
                </div>
                <div class="step-content clearfix">
                    <div class="post-mode fl">
                        <div>配送方式</div>
                        <div class="selected">xx快递</div>
                        <div>快送: <i>xxx xxxxxxx 送达</i></div>
                    </div>
                    <div class="goods-list fl">
                        <!-- 这里需要对结算的商品循环 -->
                        <div v-for="(item, index) in goodsInfo" :key="index">
                            <div class="goods-shop-name">
                                商家:&ensp;&ensp;{{ item.shop_name }}
                            </div>
                            <div>
                                <img :src="item.image" alt="" />

                                <span class="goods-name">{{ item.name }}</span>
                                <span class="goods-price"
                                    >￥{{ item.price }}</span
                                >
                                <span class="goods-num"
                                    >x{{ item.goods_num }}</span
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="trade-foot">
                <span>应付金额:&ensp;&ensp;</span>
                <span class="count-price">￥{{ orderAmount }}</span>
            </div>
            <div class="commit-order">
                <div class="commit-order-button" @click="submitOrder">
                    提交订单
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import Shortcut from "@/components/common/Shortcut";
import Logo from "@/components/common/Logo";
import { onMounted, ref, reactive } from 'vue';
import { getAllAddressData } from "@/network/address";
import { getAllOrdersByTradeNo, updateOrderInfoData } from "@/network/order";
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();


let allAddresses = ref();
let goodsInfo = ref([]);
let tradeNo = ref();
let orderAmount = ref(0);
onMounted(() => {
    tradeNo.value = route.params.trade_no;
    getAllAddressData().then(res => {
        allAddresses.value = res.data;
        console.log(allAddresses.value)
        allAddresses.value.forEach(element => {
            if (element.default == 1) {
                element.selected = true;
                selectedAddressId.value = element.id;
                console.log(selectedAddressId.value);
            } else {
                element.selected = false;
            }
        })
    })

    getAllOrdersByTradeNo(tradeNo.value).then(res => {
        goodsInfo.value = res.data.order_info;
        orderAmount.value = res.data.order_amount;
        // console.log(goodsInfo.value);
    })

})


let selectedAddressId = ref()


const changeSelected = (id) => {
    allAddresses.value.forEach(element => {
        if (element.id == id) {
            element.selected = true;
            selectedAddressId.value = id;
            console.log(selectedAddressId.value);
        } else {
            element.selected = false;
        }
    })
}

const submitOrder = () => {
    let updateData = ref({
        address_id: selectedAddressId.value,
        trade_no: tradeNo.value,
        pay_status: 1
    })

    updateOrderInfoData(updateData.value).then(res => {

    })

    router.push({
        name: "OrderPay",
        query: {
            tradeNo: tradeNo.value,
            orderAmount: orderAmount.value
        }
    })
}

</script>

<style lang="less" scoped>
.Pay {
    width: var(--content-width);
    margin: 0 auto;
    .header {
        // border-bottom: 3px solid #c0a6ff;
        height: 130px;
        line-height: 120px;
    }
    .title {
        height: 80px;
        line-height: 80px;
        .logo {
            height: 40px;
        }
        .shop-name {
            font-size: 30px;
            margin-left: 10px;
            vertical-align: middle;
            margin-top: 30px;
            font-weight: 700;
            color: #c0a6ff;
        }
        .name {
            font-size: 20px;
            margin-left: 10px;
            vertical-align: middle;
            margin-top: 30px;
        }
    }
    .content-title {
        background: linear-gradient(to right, #eee6f6, #fce6f3);
        line-height: 42px;
        height: 42px;
        font-size: 16px;
        padding-left: 20px;
    }
    .order-info {
        background: linear-gradient(to right, #eee6f6, #fce6f3);
        border: 1px solid #f0f0f0;
        margin-top: 20px;
        .step-title {
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            h3 {
                font-size: 14px;
                font-weight: 700;
            }
        }
        .add-address {
            color: #257df0;
            padding-right: 20px;
            padding-top: 20px;
            &:hover {
                color: rgb(235, 27, 204);
                cursor: pointer;
            }
        }
        .step-content {
            padding-left: 20px;
            .address-name {
                display: inline-block;
                width: 145px;
                height: 30px;
                border: 2px solid #a4a2a2;
                line-height: 30px;
                text-align: center;
                margin-bottom: 20px;
            }
            .address-info {
                margin-left: 40px;
            }
            .address-phone {
                margin-left: 40px;
            }
            .address-default {
                display: inline-block;
                margin-left: 40px;
                background-color: rgb(69, 243, 69);
                color: white;
                width: 60px;
                height: 25px;
                line-height: 25px;
                text-align: center;
            }
        }
        hr {
            width: 1160px;
            border: 1px solid palegoldenrod;
        }
        .pay-mode {
            // margin-left: 50px;
            display: inline-block;
            height: 35px;
            width: 120px;
            line-height: 35px;
            text-align: center;
            border: 2px solid #ddd;
            &:hover {
                cursor: pointer;
                border: 2px solid #df0000;
            }
        }
        .selected {
            border: 2px solid #df0000 !important;
            background-image: url("@/assets/images/order/address-selected.png");
            background-position: 103%;
            background-repeat: no-repeat;
            background-size: 35px;
        }
        .post-mode {
            width: 350px;
            // height: 137px;
            // margin-left: 20px;
            background-color: #f7f7f7;
            padding: 10px 0 10px 20px;
            div:nth-child(1) {
                font-weight: 700;
            }
            div:nth-child(2) {
                margin-top: 20px;
                font-weight: 700;
                width: 145px;
                height: 30px;
                line-height: 30px;
                text-align: center;
            }
            div:nth-child(3) {
                margin-top: 20px;
            }
        }
        .goods-list {
            background-color: #f3fbfe;
            width: 800px;
            .goods-shop-name {
                margin-top: 10px;
                margin-left: 85px;
                font-weight: 700;
            }
            img {
                width: 85px;
                height: 85px;
                margin-top: 10px;
                margin-left: 85px;
                background-color: #fff;
            }
            .goods-name {
                overflow: hidden;
                line-height: 40px;
                height: 40px;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 570px;
            }
            .goods-price {
                margin-right: 20px;
                color: #f00c0c;
                font-weight: 700;
                float: right;
                margin-bottom: 20px;
            }
            .goods-num {
                margin-right: 20px;
                float: right;
                margin-bottom: 20px;
            }
        }
    }
    .trade-foot {
        background-color: #f4f4f4;
        margin-top: 30px;
        height: 50px;
        line-height: 50px;
        text-align: right;
        padding-right: 20px;
        .count-price {
            color: #f00c0c;
            margin-left: 30px;
            font-weight: 700;
            font-size: 16px;
        }
    }
    .commit-order {
        margin-top: 10px;
        margin-bottom: 30px;
        text-align: right;
        margin-right: 20px;
        .commit-order-button {
            display: inline-block;
            width: 135px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            background-color: #dbffba;
            border-radius: 5px;
        }
    }
}
</style>